<template>
	<view class="seeSchedule">
		<view class="header_box">
			<view class="date_box flex">
				<view class="date_txt familytow fblod s44">
					{{year}}<text class="date_text s24 family f500">年</text>{{month}}<text
						class="date_text s24 family f500">月</text>{{day}}<text
						class="date_text s24 family f500">日</text>
				</view>
				<view class="other_date_icon flex" @click="goOtherDate">
					<view class="other_date_txt s24 familythree f400">
						其他日期
					</view>
					<view class="jian_icon">
						<image class="w100 h100" :src="icon.yellowLeftJianIcon" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="date_list_box flexjus">
			<view :class="[listIndex == index ? 'date_list_active' : 'date_list']" v-for="(item,index) in listDate"
				:key="index" @click="active(index)">
				{{item}}
			</view>
		</view>
		<view class="list_schedule_box">
			<view v-if="teacherList.length==0" style="font-size: 24rpx;color: #ccc;text-align: center;padding-top: 30rpx;">
				暂无数据!
			</view>
			<view class="list_schedule flexjus" v-for="(item,index) in teacherList" :key="index">
				<view class="left_box flex" style="flex: 1;">
					<view class="avatar_box">
						<image class="w100 h100" :src="item.image_src" mode=""></image>
					</view>
					<view class="name_detail_box" style="flex: 1;">
						<view class="name_txt s32 family f500">
							{{item.name}}
						</view>
						<view class="detail_txt s24 familythree f400">
							{{item.t_type}}
						</view>
					</view>
				</view>
				<view class="right_box">
					<!-- day_type  1空 2满 3休-->
					<view class="schedule_txt s24 familythree f400" v-if="item.day_type==1">
						有档期
					</view>
					<view class="schedule_txt_no s24 familythree f400" v-else>
						无档期
					</view>
					<view @click="goSchedule(item)" class="see_detail flex" style="margin-left: 10rpx;">
						<view class="detail_txt_see s24 familythree f400">
							查看详情
						</view>
						<view class="right_jian">
							<image class="w100 h100" :src="icon.detailJianIcon" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				year: '',
				month: '',
				day: '',
				days: '',
				listDate: [],
				listIndex: 0,
				teacherType:0,
				shopId:0,
				time:'',//档期
				page:1,
				lastPage:0,
				teacherList:[],
			}
		},
		computed: {
			...mapState(['icon'])
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.teacherType = options.teacherType;
			this.getDate();
			this.time = this.year+'-'+this.month+'-'+this.listDate[0];
		},
		onShow() {
			this.page = 1;
			this.getTeacherList();
		},
		onReachBottom() {
			if (this.page >= this.lastPage) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.page++;
				this.getTeacherList();
			}
		},
		methods: {
			getTeacherList(){
				this.$request({
					url: 'wedding/worker_appointment_worker',
					method: 'POST',
					data: {
						shop_id: this.shopId,
						type: Number(this.teacherType)+1,//1摄影 2化妆
						// type_id:0,
						time:this.time,//档期，
						user_id:uni.getStorageSync('userInfo').id ? uni.getStorageSync('userInfo').id : 0,
						page:this.page
					},
				}).then(res => {
					if(this.page==1){
						this.teacherList = res.data.data.data;
					}else {
						this.teacherList.push(...res.data.data.data);
					}
					this.lastPage = res.data.data.last_page;
				})
			},
			getDate() {
				let date = new Date()
				this.year = date.getFullYear()
				this.month = date.getMonth() + 1
				this.day = date.getDate()
				this.days = this.getMonthDay(this.year, this.month);
				this.getForDate()
			},
			getForDate() {
				let aaa = 1;
				for (var i = 0; i < 7; i++) {
					if((this.day+i)<=this.days){
						this.listDate.push(this.day+i);
					}else{
						this.listDate.push(aaa);
						aaa++;
					}
				}
			},
			active(index) {
				this.listIndex = index;
				this.time = this.year+'-'+this.month+'-'+this.listDate[index];
				this.page = 1;
				this.getTeacherList();
			},
			goOtherDate() {
				uni.navigateTo({
					url: './otherDate?shopId='+this.shopId+'&teacherType='+this.teacherType
				})
			},
			goSchedule(item) {
				uni.navigateTo({
					url: './lookSchedule?teacherId='+item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.seeSchedule {
		overflow: hidden;

		.header_box {
			margin-top: 90upx;

			.date_box {
				margin-left: 264upx;

				.date_txt {
					color: #333333;

					.date_text {
						color: #999999;
					}
				}

				.other_date_icon {
					position: absolute;
					right: 32upx;
					margin-top: 20upx;

					.other_date_txt {
						color: #E0A76D;
					}

					.jian_icon {
						width: 24upx;
						height: 24upx;
						margin-top: -4upx;
					}
				}

			}
		}

		.date_list_box {
			padding: 28upx 32upx 0 32upx;
			box-sizing: border-box;

			.date_list_active {
				width: 74upx;
				height: 74upx;
				background: #333333;
				border-radius: 50%;
				text-align: center;
				line-height: 74upx;
				color: #ffffff;
				font-size: 44upx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}

			.date_list {
				width: 40upx;
				height: 44upx;
				font-size: 32upx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #6E6F71;
				text-align: center;
				line-height: 44upx;
				margin-top: 24upx;
			}
		}
		.list_schedule_box {
			margin-top: 32upx;
			.list_schedule {
				width: 686upx;
				margin: 0 auto;
				padding: 28upx 0 28upx 0;
				box-sizing: border-box;
				border-bottom: 1upx solid #F4F4F4;
				.avatar_box {
					width: 98upx;
					height: 98upx;
					border-radius: 8upx;
					background-color: #999;
				}
				.name_detail_box {
					margin-left: 20upx;
					.name_txt {
						color: #000;
					}
					.detail_txt {
						color: #999;
						margin-top: 16upx;
						display: -webkit-box;
						overflow: hidden;
						white-space: normal;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
				.schedule_txt {
					color: #5A99DE;
					text-align: right;
				}
				.schedule_txt_no {
					color: #333333;
					text-align: right;
				}
				.see_detail {
					margin-top: 26upx;
					.detail_txt_see {
						color: #999;
					}
					.right_jian {
						width: 24upx;
						height: 24upx;
						margin-top: -4upx;
					}
				}
			}
		}
	}
</style>
